<template>
  <view>
    <!-- index.wxml -->
    <view class="container">
      <view class="menu">
        <view :class="type == '-10' ? 'menu01' : 'menu02'" @tap="changetype('-10')">
          <text>全部</text>
        </view>
        <view :class="type == '0' ? 'menu01' : 'menu02'" @tap="changetype('0')">
          <text>待付款</text>
        </view>
        <view :class="type == '2' ? 'menu01' : 'menu02'" @tap="changetype('2')">
          <text>支付成功</text>
        </view>
        <view :class="type == '3' ? 'menu01' : 'menu02'" @tap="changetype('3')">
          <text>已完成</text>
        </view>
        <view :class="type == '-1' ? 'menu01' : 'menu02'" @tap="changetype('-1')">
          <text>已取消</text>
        </view>
        <!--        <view :class="type == '-2' ? 'menu01' : 'menu02'" @tap="changetype('-2')">-->
        <!--          <text>已退款</text>-->
        <!--        </view>-->
      </view>

      <view class="list_box">
        <view class="kk" v-for="(item, index) in listdata" :key="index">
          <navigator v-if="item.status==0" :url="'/packageB/dingdanxiangqing/dingdanxiangqing?id='+item.id">
            <view class="kk_ding">
              <view class="kk_ding_nei">
                <view class="tx">
                  <image style="width: 100%;height: 100%" :src="item.snapshoot.store_info.logo"></image>
                </view>
                <view class="name">{{ item.snapshoot.store_info.name }}></view>
                <view></view>
              </view>

              <view class="zt">待付款</view>
            </view>

            <view class="kk_zhong">
              <view class="zhong_tx">
                <image style="width: 100%;height: 100%" :src="item.snapshoot.cover"></image>
              </view>
              <view>
                <view class="zhong_h1">{{ item.snapshoot.name }}</view>

                <view class="zhong_nk">
                  <view>下单时间：</view>
                  <view>{{ item.create_time }}</view>
                </view>

                <view class="zhong_nk">
                  <view>预定时段：</view>
                  <view>{{ item.start_time + ' 至 ' + item.end_time }}</view>
                </view>

                <view class="zhong_h1">总计 ￥{{ item.price }}</view>
              </view>
            </view>
          </navigator>
          <navigator v-if="item.status==1" :url="'/packageB/dingdanxiangqing/daixiaofei?id='+item.id">
            <view class="kk_ding">
              <view class="kk_ding_nei">
                <view class="tx">
                  <image style="width: 100%;height: 100%" :src="item.snapshoot.store_info.logo"></image>
                </view>
                <view class="name">{{ item.snapshoot.store_info.name }}></view>
                <view></view>
              </view>

              <view class="zt">待消费</view>
            </view>

            <view class="kk_zhong">
              <view class="zhong_tx">
                <image style="width: 100%;height: 100%" :src="item.snapshoot.cover"></image>
              </view>
              <view>
                <view class="zhong_h1">{{ item.snapshoot.name }}</view>

                <view class="zhong_nk">
                  <view>下单时间：</view>
                  <view>{{ item.create_time }}</view>
                </view>

                <view class="zhong_nk">
                  <view>预定时段：</view>
                  <view>{{ item.start_time + ' 至 ' + item.end_time }}</view>
                </view>

                <view class="zhong_h1">总计 ￥{{ item.price }}</view>
              </view>
            </view>
          </navigator>
          <navigator v-if="item.status==2" :url="'/packageB/dingdanxiangqing/xiaofeizhong?id='+item.id">
            <view class="kk_ding">
              <view class="kk_ding_nei">
                <view class="tx">
                  <image style="width: 100%;height: 100%" :src="item.snapshoot.store_info.logo"></image>
                </view>
                <view class="name">{{ item.snapshoot.store_info.name }}></view>
                <view></view>
              </view>

              <view class="zt">消费中</view>
            </view>

            <view class="kk_zhong">
              <view class="zhong_tx">
                <image style="width: 100%;height: 100%" :src="item.snapshoot.cover"></image>
              </view>
              <view>
                <view class="zhong_h1">{{ item.snapshoot.name }}</view>

                <view class="zhong_nk">
                  <view>下单时间：</view>
                  <view>{{ item.create_time }}</view>
                </view>

                <view class="zhong_nk">
                  <view>预定时段：</view>
                  <view>{{ item.start_time + ' 至 ' + item.end_time }}</view>
                </view>

                <view class="zhong_h1">总计 ￥{{ item.price }}</view>
              </view>
            </view>
          </navigator>
          <navigator v-if="item.status==3" :url="'/packageB/dingdanxiangqing/yiwancheng?id='+item.id">
            <view class="kk_ding">
              <view class="kk_ding_nei">
                <view class="tx">
                  <image style="width: 100%;height: 100%" :src="item.snapshoot.store_info.logo"></image>
                </view>
                <view class="name">{{ item.snapshoot.store_info.name }}></view>
                <view></view>
              </view>

              <view class="zt">已完成</view>
            </view>

            <view class="kk_zhong">
              <view class="zhong_tx">
                <image style="width: 100%;height: 100%" :src="item.snapshoot.cover"></image>
              </view>
              <view>
                <view class="zhong_h1">{{ item.snapshoot.name }}</view>

                <view class="zhong_nk">
                  <view>下单时间：</view>
                  <view>{{ item.create_time }}</view>
                </view>

                <view class="zhong_nk">
                  <view>预定时段：</view>
                  <view>{{ item.start_time + ' 至 ' + item.end_time }}</view>
                </view>

                <view class="zhong_h1">总计 ￥{{ item.price }}</view>
              </view>
            </view>
          </navigator>
          <navigator v-if="item.status==-1" :url="'/packageB/dingdanxiangqing/yiquxiao?id='+item.id">
            <view class="kk_ding">
              <view class="kk_ding_nei">
                <view class="tx">
                  <image style="width: 100%;height: 100%" :src="item.snapshoot.store_info.logo"></image>
                </view>
                <view class="name">{{ item.snapshoot.store_info.name }}></view>
                <view></view>
              </view>

              <view class="zt">已取消</view>
            </view>

            <view class="kk_zhong">
              <view class="zhong_tx">
                <image style="width: 100%;height: 100%" :src="item.snapshoot.cover"></image>
              </view>
              <view>
                <view class="zhong_h1">{{ item.snapshoot.name }}</view>

                <view class="zhong_nk">
                  <view>下单时间：</view>
                  <view>{{ item.create_time }}</view>
                </view>

                <view class="zhong_nk">
                  <view>预定时段：</view>
                  <view>{{ item.start_time + ' 至 ' + item.end_time }}</view>
                </view>

                <view class="zhong_h1">总计 ￥{{ item.price }}</view>
              </view>
            </view>
          </navigator>
          <navigator v-if="item.status==-2" :url="'/packageB/dingdanxiangqing/yituikuan?id='+item.id">
            <view class="kk_ding">
              <view class="kk_ding_nei">
                <view class="tx">
                  <image style="width: 100%;height: 100%" :src="item.snapshoot.store_info.logo"></image>
                </view>
                <view class="name">{{ item.snapshoot.store_info.name }}></view>
                <view></view>
              </view>

              <view class="zt">已退款</view>
            </view>

            <view class="kk_zhong">
              <view class="zhong_tx">
                <image style="width: 100%;height: 100%" :src="item.snapshoot.cover"></image>
              </view>
              <view>
                <view class="zhong_h1">{{ item.snapshoot.name }}</view>

                <view class="zhong_nk">
                  <view>下单时间：</view>
                  <view>{{ item.create_time }}</view>
                </view>

                <view class="zhong_nk">
                  <view>预定时段：</view>
                  <view>{{ item.start_time + ' 至 ' + item.end_time }}</view>
                </view>

                <view class="zhong_h1">总计 ￥{{ item.price }}</view>
              </view>
            </view>
          </navigator>
          <view class="kk_di" v-if="item.status==0">
            <view class="di_qx" @tap="canceloreder(item.id)">
              <view>取消订单</view>
            </view>
            <view class="di_jx" @tap="proceed(index)">
              <view>继续付款</view>
            </view>
          </view>
          <view class="kk_di" v-if="item.status==1">
            <view class="di_ksxf" @tap="open_damen(item.id,item.order_no)">
              <view>开大门</view>
            </view>
            <view class="di_ksxf" @tap="open_bxmen(item.id,item.order_no)">
              <view>开包厢</view>
            </view>
            <view class="di_ksxf" @tap="startexpense(item.id)">
              <view>开始消费</view>
            </view>
          </view>
          <view class="kk_di" v-if="item.status==2">
            <view class="di_ksxf" @tap="open_damen(item.id,item.order_no)">
              <view>开大门</view>
            </view>
            <view class="di_ksxf" @tap="open_bxmen(item.id,item.order_no)">
              <view>开包厢</view>
            </view>
            <view style="background-color: #FF5722" class="di_ksxf" @tap="overexpense(item.id)">
              <view>结束消费</view>
            </view>
            <view class="di_ksxf" @tap="renew(item.id,item)">
              <view>续费</view>
            </view>
          </view>
          <view class="ge2"></view>
        </view>
      </view>
    </view>

    <view class="page">
      <!-- 页面内容 -->
      <view class="modal" v-if="modalVisible">
        <view class="modal-header">
          <image class="close-btn" @tap="closeModal" src="/static/pages/img/x.png"></image>
        </view>
        <image class="qr-code" :src="qrCodeUrl"></image>
        <view>请使用微信扫一扫完成支付</view>
      </view>
      <view class="mask" v-if="modalVisible" @tap="closeModal"></view>
    </view>
  </view>
</template>

<script>
// pages/wodedingdan/wodedingdan.js
import {
  endOrdersEarly,
  houseordercancelOrder,
  houseorderlist,
  houseorderopenDoor,
  startOrdersEarly,
  userindex
} from "@/common/api";

export default {
  data() {
    return {
      modalVisible: false,
      page: 1,
      // 控制模态框显示与隐藏
      type: '-10',
      listdata: [],
      daifukuan: [
        {
          name: '',
          bxname: '',
          xddate: '2024-03-18 21:53',
          yddate: '2024-03-18 21:23 至 23:53',
          zongji: '37.6'
        }
      ],

      zhifuchenggong: [
        {
          id: '0',
          name: '',
          bxname: '',
          date: '2022-12-24 20:00 至 2022-12-25 02:00'
        },

      ],

      yiwancheng: [
        {
          name: '',
          bxname: '',
          date: '2022-12-24 20:00 至 2022-12-25 02:00'
        }
      ],

      yiquxiao: [
        {
          name: '',
          bxname: '',
          xddate: '2024-03-18 21:53',
          yddate: '2024-03-18 21:23 至 23:53',
          zongji: '88'
        }
      ],


      qrCodeUrl: '',
      curstatus: '',
      daifukuanall: []
    };
  }
  /**
   * 生命周期函数--监听页面加载
   */,
  onLoad(options) {

  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.getdata()
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    this.page = this.page + 1;
    this.getdata()
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  },
  methods: {
    // 开大门
    open_damen(id, no) {
      uni.showLoading({
        title: '操作中...'
      });
      console.log('open_damen', id, no)
      houseorderopenDoor({
        order_id: id,
        order_no: no,
        onclick: '1'
      }, res => {
        uni.hideLoading();
        console.log('houseorderopenDoor', res)
        uni.showModal({
          title: res.data.msg,
          showCancel: false
        });
      }, fail => {
        uni.hideLoading();
        uni.showModal({
          title: "操作失败",
          showCancel: false
        });
      })
    },
    // 续费
    renew(id, data) {
      console.log('data', data)
      let _this = this
      uni.navigateTo({
        url: '/packageB/baoxiang/baoxiang?id=' + data.house_id + '&orderendtime=' + data.end_time + '&pagetypetype=2'
      });
    },
    // 结束消费
    overexpense(id) {
      uni.showLoading({
        title: '操作中...'
      });
      let _this = this
      uni.showModal({
        title: "确定结束消费",
        showCancel: false,
        success: function (ures) {
          if (ures.confirm) {
            endOrdersEarly({
              order_id: id
            }, overres => {
              if (overres.data.code == 0) {
                uni.showModal({
                  title: overres.data.msg,
                  showCancel: false,
                  success: function () {
                    _this.getdata()
                  }
                })
              }
            },fail=>{
              uni.hideLoading();
              uni.showModal({
                title: "操作失败",
                showCancel: false
              });
            })
          }

        }
      })
    },
    // 开包厢
    open_bxmen(id, no) {
      uni.showLoading({
        title: '操作中...'
      });
      let _this = this
      console.log('open_damen', id, no)
      houseorderopenDoor({
        order_id: id,
        order_no: no,
        onclick: '2'
      }, res => {
        uni.hideLoading();
        console.log('houseorderopenDoor', res)
        if (res.data.code == 201) {
          uni.showModal({
            title: res.data.msg,
            success: function (ures) {
              if (ures.confirm) {
                _this.tiqianxiaofei(id)
              }
            }
          });
        } else {
          uni.showModal({
            title: res.data.msg,
            showCancel: false
          });
        }

      }, fail => {
        uni.hideLoading();
        uni.showModal({
          title: "操作失败",
          showCancel: false
        });
      })

    },
    // 开始消费
    startexpense(id) {
      let _this = this
      uni.showModal({
        title: "非预订时间内订单，确定提前消费吗",
        success: function (ures) {
          if (ures.confirm) {
            _this.tiqianxiaofei(id)
          } else {

          }
        }
      })
    },
    // 提前消费
    tiqianxiaofei(id) {
      uni.showLoading({
        title: '操作中...'
      });
      startOrdersEarly({
        order_id: id
      }, res => {
        uni.hideLoading();
        uni.showModal({
          title: res.data.msg,
          showCancel: false
        });
      }, fail => {
        uni.hideLoading();
        uni.showModal({
          title: "操作失败",
          showCancel: false
        });
      })
    },
    // 继续付款
    proceed(index) {
      let item = this.listdata[index];
      console.log('proceed', item)
      uni.navigateTo({
        url: "/packageB/dingdanzhifu/dingdanzhifu?mpaytype=2&order_id=" + item.id + "&pay_type=" + item.pay_type + "&type=" + item.type + "&end=" + item.end_time + "&start=" + item.start_time + "&house_id=" + item.house_id
      })
    },
    // 获取数据
    getdata() {
      uni.showLoading({
        title: '加载中...'
      });
      let _this = this
      houseorderlist({
        status: this.type,
        page: _this.page
      }, res => {
        this.listdata = this.listdata.concat(res.data.data);
        uni.hideLoading();
      })
    },
    changetype: function (type) {

      var that = this;
      that.setData({
        type: type,
        page:1,
        listdata:[]
      });

      this.getdata()

    },
    // 取消订单
    canceloreder: function (order_id) {
      let _this = this;
      uni.showModal({
        title: '确认取消',
        content: '确认要取消此订单吗',
        success: function (res) {
          if (res.confirm) {
            houseordercancelOrder({
              order_id: order_id
            }, ssres => {
              if (ssres.data.code == 0) {
                uni.showModal({
                  title: ssres.data.msg,
                  showCancel: false,
                  success: function () {
                    uni.showLoading({
                      title: '加载中...'
                    });
                    _this.getdata()
                    uni.hideLoading();
                  }
                })
              } else {
                uni.showModal({
                  title: ssres.data.msg,
                  showCancel: false
                })
              }
            })
          } else if (res.cancel) {
            console.log('取消');
          }
        }
      });
    },

    showModal() {
      console.log('占位：函数 showModal 未声明');
    },

    closeModal() {
      console.log('占位：函数 closeModal 未声明');
    }
  }
};
</script>
<style>
/**index.wxss**/
.menu {
  width: 100%;
  height: auto;
  overflow: hidden;
  position: absolute;
  top: 0;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}

.menu01 {
  width: 20%;
  line-height: 90rpx;
  font-size: 32rpx;
  text-align: center;
  float: left;
  color: #ff4800;
  border-bottom: 2px solid #ff4800;
}

.menu02 {
  width: 20%;
  line-height: 90rpx;
  font-size: 32rpx;
  text-align: center;
  float: left;
  color: #666666;
}

.list_box {
  position: absolute;
  top: 130rpx;
  width: 100%;
}

.kk {
  margin: 0rpx 0rpx 20rpx -30rpx;
}

.kk_ding {
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 28rpx;
  font-weight: bold;
}

.kk_ding_nei {
  display: flex;
  align-items: center;
}

.tx {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

.name {
  width: 360rpx;
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

.zt {
  color: rgb(204, 144, 13);
  margin-right: -20rpx;
}

.zt_cg {
  margin-right: -20rpx;
  color: rgb(131, 127, 127);
}

.kk_zhong {
  display: flex;
  margin: 20rpx 20rpx 20rpx 20rpx;
  padding: 0 0 0 40rpx;
}

.zhong_tx {
  width: 100rpx;
  height: 100rpx;
  background-color: blue;
  margin-right: 10rpx;
  border-radius: 5px; /* 圆角设置为20px */
}

.zhong_nk {
  display: flex;
  color: rgb(129, 129, 129);
  font-size: 25rpx;
  line-height: 1.5;
}

.zhong_h1 {
  font-weight: bold;
  font-size: 30rpx;
  margin-bottom: 10rpx;
}

.kk_di {
  display: flex;
  justify-content: flex-end;
  font-size: 25rpx;
  margin: 0 20rpx 30rpx 0;
}

.di_qx {
  border: 1px solid rgb(175, 175, 175);
  border-radius: 4px; /* 圆角设置为20px */
  padding: 10rpx 20rpx 10rpx 20rpx;
  margin-right: 30rpx;
}

.di_jx {
  background-color: rgb(131, 199, 154);
  border-radius: 4px; /* 圆角设置为20px */
  padding: 10rpx 20rpx 10rpx 20rpx;
  margin-right: 20rpx;
  color: rgb(255, 255, 255);
}

.di_ksxf {
  background-color: rgb(131, 199, 154);
  border-radius: 4px; /* 圆角设置为20px */
  padding: 10rpx 20rpx 10rpx 20rpx;
  margin-right: 20rpx;
  color: rgb(255, 255, 255);
}

.pagex {
  position: relative;
  width: 100%;
  height: 100vh;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
  z-index: 999; /* 确保遮罩层在最上层 */
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 0 70rpx 100rpx 70rpx;
  border-radius: 8rpx;
  z-index: 1000; /* 确保模态框在遮罩层上面 */
}

.modal-header {
  display: flex;
  justify-content: flex-end;
}

.close-btn {
  color: black;
  cursor: pointer;
  margin: 30rpx -40rpx 120rpx 0rpx;
  width: 20rpx;
  height: 20rpx;
}

.qr-code {
  display: block;
  margin-top: 20px;
  width: 400rpx;
  height: 400rpx;
}
</style>
